<template>
  <view>
    <view class="box">
      <uni-search-bar @clear="clearList" @confirm="myList" v-model='key' @input="myinput" :focus="true"
        cancelButton="none" :radius="40">
      </uni-search-bar>
    </view>
    <!-- 搜索建议列表 -->
    <view class="searchList">
      <view @click="toDetail(item.goods_id)" class="item" v-for="(item, index) in searchList" :key="index">
        <view class="left" @click="toDetail(item.goods_id)">
          {{ item.goods_name }}
        </view>
        <uni-icons type="right" size="16"></uni-icons>
      </view>
    </view>
    <!-- 历史记录 -->
    <!-- 搜索历史 -->
    <view class="history">
      <view class="top">
        <text>搜索历史</text>
        <uni-icons type="trash" size="16" @click="clearHistory"></uni-icons>
      </view>
      <view class="bottom">
        <view class="item" v-for="(item, index) in historyList" :key="index" @click="toList(item)">
          {{ item }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timer: null,
        searchList: [],
        key: '',
        historyList: []
      }
    },
    methods: {
      //清空历史记录
      clearHistory() {
        uni.showModal({
          title: '警告',
          content: '是否删除历史记录',
          success: (res) => {
            if (res.confirm) {
              this.historyList = []
              uni.removeStorageSync('history')

            }
          }
        })
      },
      clearList() {
        this.searchList = []
      },
      //回车跳转去列表
      myList(key) {
        uni.navigateTo({
          url: `/pages/list/list?key=${this.key}`
        })
        this.historyList.unshift(key.value)
        this.historyList = [...new Set(this.historyList)]
        uni.setStorageSync('history', this.historyList)
        this.key = ''
        this.searchList = []
      },
      //跳转
      toList(key) {
        uni.navigateTo({
          url: `/pages/list/list?key=${key}`
        })
      },
      myinput(e) {
        clearTimeout(this.timer)
        if (e === '') return
        this.timer = setTimeout(async () => {
          let {
            data: res
          } = await uni.$http.get(`/api/public/v1/goods/search?query=${e}`)
          if (res.meta.status !== 200) return uni.$showMsg()
          this.searchList = res.message.goods
        }, 1000)
      },
      toDetail(goods_id) {
        this.key = '',
          this.searchList = []
        uni.navigateTo({
          url: `/pages/goods_detail/main?goods_id=${goods_id}`
        })
      }
    },
    onShow() {
      this.key = '',
        this.searchList = []
    },
    onLoad() {
      this.historyList = uni.getStorageSync('history') || []
    }
  }
</script>

<style lang="scss">
  .box {
    background-color: #c00000;
    position: sticky;
    top: 0;
    left: 0;
  }

  .searchList {
    font-size: 12px;

    .item {
      display: flex;
      justify-content: space-between;
      line-height: 60rpx;
      border-bottom: 1px solid #f5f5f5;
      padding: 0 20rpx;

      .left {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .history {
    .top {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f0f0f0;
      padding: 0 20rpx;
      line-height: 80rpx;
    }

    .bottom {
      display: flex;
      flex-wrap: wrap;

      .item {
        padding: 10rpx 20rpx;
        background-color: #ccc;
        margin: 10rpx 20rpx;
      }
    }
  }
</style>
